<!-- 我的 -->
<template>
	<view class="container">
		<view class="c-info" :style="{'background-image':`url(${imageURL}mine-bg.jpg)`}"
			@click="$store.state.token?'':toLogin()">
			<u-avatar :src="baseURL + userInfo.avatar" :size="'160rpx'"></u-avatar>
			<text class="c-info_name">{{userInfo.nickname?userInfo.nickname:'未登录'}}</text>
			<!-- <text class="c-info_id" v-if="userInfo">ID:{{userInfo.id}}</text> -->
			<view class="c-info-tag" v-if="userInfo">
				<image src="/static/status.png" mode=""></image>
				<text class="">{{status=='student'?'学生':status=='teacher'?'教师':status=='org'?'机构':'普通用户'}}</text>
			</view>
		</view>
		<!-- 教师工具栏 -->
		<view class="c-column" v-if="status=='teacher'">
			<view class="column_item" v-for="item in teacherColumnList" :key="item.id" @click="toPages(item.path)">
				<image :src="item.src" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 机构工具栏 -->
		<view class="c-column" v-else-if="status=='org'">
			<view class="column_item" v-for="item in orgColumnList" :key="item.id" @click="toPages(item.path)">
				<image :src="item.src" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="c-column" v-else>
			<view class="column_item" v-for="item in columnList" :key="item.id" @click="toPages(item.path)">
				<image :src="item.src" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="c-cell">
			<u-cell-group>
				<!-- <u-cell icon="calendar-fill" title="参赛查询" size="large" @click="toSignUpSearch"></u-cell>
				<u-cell icon="coupon" title="成绩查询" size="large" @click="toGradeSearch"></u-cell> -->
				<u-cell icon="man-add-fill" title="教师子女认证" size="large" v-if="status=='teacher'"
					@click="toTeacherChildCer"></u-cell>
				<u-cell icon="pushpin-fill" title="我的简历" size="large" v-if="status=='teacher'" @click="toTeacherResume">
				</u-cell>
				<u-cell icon="grid-fill" title="招聘机构" size="large" v-if="status=='teacher'" @click="toRecruitmentOrg">
				</u-cell>
				<u-cell icon="file-text-fill" title="招聘市场" size="large" v-if="status=='org'" @click="toOrgRecruit">
				</u-cell>
				<u-cell icon="plus" title="发布职位" size="large" v-if="status=='org'" @click="toOrgAddRecruit">
				</u-cell>
			<!-- 	<u-cell icon="coupon" title="获奖信息" size="large" v-if="status!=='student'" @click="navigateTo('/pages/pages_mine/student/studentWiinningInfo')">
				</u-cell> -->
				<u-cell icon="star-fill" title="已报名活动" @click="toActive" size="large"></u-cell>
				<u-cell icon="server-fill" title="联系客服" size="large">
					<view class="service" slot="value">
						<image src="/static/service.png" mode=""></image>
						<view class="service-btn">
							<u-button :plain="true" :customStyle="{'opacity':0}" openType="contact"></u-button>
						</view>
					</view>
				</u-cell>
				<u-cell icon="share-square" title="关于我们" @click="toAboutUs" size="large"></u-cell>
			</u-cell-group>
		</view>
		<view class="c-logout" v-if="token">
			<view class="logout" @click="toLogout">
				<text>退出登录</text>
			</view>
		</view>
		<view class="c-overlay">
			<StatusOverlay v-if="isStatusOverlay" @click.native="isStatusOverlay=false"></StatusOverlay>

		</view>

		<u-modal :show="logoutModal" title="退出登录" content="是否确定退出当前登录用户" showCancelButton @confirm="logoutConfirm"
			@cancel="logoutModal = false" @close="logoutModal = false" closeOnClickOverlay></u-modal>
	</view>
</template>

<script>
	import StatusOverlay from "@/pages/components/StatusOverlay.vue"
	export default {
		name: "mine",
		components: {
			StatusOverlay
		},
		data() {
			return {
				// 退出登录模态框
				logoutModal: false,
				// 身份是否审核中
				statusApply: false,
				// 选择身份登录遮罩层
				isStatusOverlay: false,
				// 用户身份
				status: this.$store.state.status,
				token: '',
				// status:'org',
				// 用户信息
				userInfo: {},
				columnList: [{
						id: 1,
						src: '/static/mine-info.png',
						title: '个人信息',
						path: '/pages/pages_mine/student/studentInfo'
					},
					{
						id: 2,
						src: '/static/mine-signup.png',
						title: '报名赛事',
						path: '/pages/pages_mine/student/studentGameSignUpInfo'
					},
					{
						id: 3,
						src: '/static/mine-good.png',
						title: '获奖信息',
						path: '/pages/pages_mine/student/studentWiinningInfo'
					},
					{
						id: 4,
						src: '/static/mine-test.png',
						title: '考级报名',
						path: '/pages/pages_mine/student/studentTestSignUpInfo'
					}
				],
				teacherColumnList: [{
						id: 1,
						src: '/static/mine-teacher.png',
						title: '个人信息',
						path: '/pages/pages_mine/teacher/teacherInfo'
					},
					{
						id: 3,
						src: '/static/mine-students.png',
						title: '学生信息',
						path: '/pages/pages_mine/teacher/teacherStudentList'
					},
					{
						id: 2,
						src: '/static/mine-org.png',
						title: '考级管理',
						path: '/pages/pages_mine/teacher/teacherStudentTestSignUp'
					},

					{
						id: 4,
						src: '/static/mine-signups.png',
						title: '获奖信息',
						// path: '/pages/pages_mine/student/studentWiinningInfo'
						path: '/pages/pages_mine/teacher/teacherStudentSignUp'
					}
				],
				orgColumnList: [{
						id: 1,
						src: '/static/mine-org.png',
						title: '机构信息',
						path: '/pages/pages_mine/org/orgInfo'
					},
					{
						id: 2,
						src: '/static/mine-students.png',
						title: '学生信息',
						path: '/pages/pages_mine/org/orgStudentList'
					},
					{
						id: 3,
						src: '/static/mine-teachers.png',
						title: '考级管理',
						path: '/pages/pages_mine/org/orgStudentTestSignUp'
					},
					{
						id: 4,
						src: '/static/mine-signups.png',
						title: '获奖信息',
						path: '/pages/pages_mine/teacher/teacherStudentSignUp'
						// path: '/pages/pages_mine/org/orgStudentSignUp'
					}
				],
			}
		},
		onShow() {
			this.getUserInfo()
			if (uni.getStorageSync('userInfo').identityData) {
				this.statusApply = false
			} else {
				this.statusApply = true
			}
			this.token = uni.getStorageSync('token')
		},
		onHide() {
			this.isStatusOverlay = false
		},
		watch: {
			'$store.state.status': {
				handler() {
					this.status = uni.getStorageSync('status')
					this.userInfo = uni.getStorageSync('userInfo')

				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 确认退出登录
			logoutConfirm() {
				uni.clearStorageSync()
				uni.reLaunch({
					url: "/pages/pages_index/index"
				})
			},
			// 退出登录
			toLogout() {
				this.logoutModal = true
			},
			// 跳转机构发布岗位
			toOrgAddRecruit() {
				this.navigateTo('/pages/pages_mine/org/orgRecruit')
			},
			// 跳转查看机构列表
			toRecruitmentOrg() {
				if (this.statusApply) {
					uni.$u.toast("您的身份认证申请正在审核中...")
				} else {
					this.navigateTo('/pages/pages_mine/public/mineRecruitmentOrg')
				}
			},
			// 跳转查询报名信息
			toSignUpSearch() {
				this.navigateTo('/pages/pages_index/inside/searchSignUp')
			},
			// 跳转查询参赛成绩
			toGradeSearch(){
				this.navigateTo('/pages/pages_index/inside/searchGrade')
			},
			// 跳转老师编辑简历
			toTeacherResume() {
				if (this.statusApply) {
					uni.$u.toast("您的身份认证申请正在审核中...")
				} else {
					this.navigateTo('/pages/pages_mine/teacher/teacherResume')
				}
			},
			// 跳转机构查看简历
			toOrgRecruit() {
				if (this.statusApply) {
					uni.$u.toast("您的身份认证申请正在审核中...")
				} else {
					this.navigateTo("/pages/pages_mine/org/orgRecruitList")
				}

			},
			// 跳转教师子女认证
			toTeacherChildCer() {
				if (this.statusApply) {
					uni.$u.toast("您的身份认证申请正在审核中...")
				} else {
					this.navigateTo("/pages/pages_mine/teacher/teacherChildCer")
				}

			},
			// 跳转已报名活动
			toActive() {
				this.navigateTo("/pages/pages_mine/public/mineActive")
			},
			// 跳转关于我们
			toAboutUs() {
				this.navigateTo("/pages/pages_mine/public/mineAbout")
			},
			// 跳转其他页面
			toPages(path) {
				if (this.$store.state.token) {
					if (uni.getStorageSync('status') == 'user') {
						this.isStatusOverlay = true
					} else {
						if (!this.statusApply) {
							this.navigateTo(path)
						} else if (this.status == 'teacher') {
							this.navigateTo('/pages/pages_mine/teacher/teacherEditInfo')
						} else if (this.status == 'org') {
							this.navigateTo('/pages/pages_mine/org/orgEditInfo')
						}
					}

				} else {
					this.toLogin()
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;

		.c-info {
			width: 100%;
			height: 400rpx;
			background-color: #fff;
			box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.2);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-size: 120% 100%;
			background-position: center bottom;

			.c-info_avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.2);
				background-color: #fff;
			}

			&>text {
				text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
				font-size: 28rpx;
				font-weight: bold;
				// background-color: #fff;
				margin-top: 5rpx;
				padding: 0 10rpx;
			}

			.c-info_name {
				font-size: 38rpx;
			}

			.c-info-tag {
				margin-top: 5rpx;
				// background-color: #fff;
				padding: 0 10rpx;
				display: flex;
				align-items: center;

				&>image {
					width: 40rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				&>text {
					font-weight: bold;
				}
			}

		}

		.c-column {
			width: 100%;
			margin: 25rpx 0;
			display: flex;
			justify-content: space-around;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);

			.column_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				// font-weight: bold;

				&>image {
					width: 80rpx;
					height: 80rpx;
				}

			}
		}

		.c-cell {
			margin-top: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);

			.service {
				width: 50%;
				position: relative;

				&>image {
					position: absolute;
					top: 0;
					right: 0;
					transform: translateY(-50%);
					width: 50rpx;
					height: 50rpx;
				}

				.service-btn {
					position: absolute;
					transform: translateY(-50%);
					width: 100%;

				}
			}
		}

		.c-logout {
			width: 100%;
			padding: 25rpx 0;

			.logout {
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
				border-radius: 10rpx;
				color: #9c9694;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
			}
		}
	}
</style>